<script setup>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getPlayListdynamic } from "../../apis/music";
import {
  getPlaylistDetail,
  getMusicDetailList,
  getPlayListAll,
} from "../../apis/user";

const route = useRoute();
const data = ref();
const songs = ref([]);

const subscribed = ref();
const type = route.query.type;
//获取歌单信息
const getInit = async () => {
  await getPlaylistDetail({ id: route.query.id }).then((res) => {
    data.value = res.playlist;
  });
  await getPlayListAll({ id: route.query.id }).then((res) => {
    songs.value = res.songs;
  });
  await getPlayListdynamic(route.query.id).then((res) => {
    subscribed.value = res.subscribed;
  });
};

getInit();

watchEffect(() => {
  if (route.path == "/songListDetail") {
    getInit();
  }
});
</script>

<template>
  <header-bar title="歌单详情"></header-bar>
  <div class="wrapper">
    <detail-info :playList="data"></detail-info>
    <div class="list_wrap">
      <music-list
        v-if="type"
        :isPlayLike="subscribed"
        :listInfo="data"
        :songs="songs"
      ></music-list>
      <music-list v-else listInfo="" :isPlayLike="subscribed" :songs="songs"></music-list>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list_wrap {
  margin-top: 30px;
  padding: 30px 20px;
  height: calc(100vh - 330px);
}
</style>
